<!DOCTYPE html>
<html>
<head>
  <div  th:replace="common/header.html"></div>


</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div th:replace="common/chart.html"></div>

<div class="wrapper">

  <div th:replace="common/navbar.html"></div>

  <div th:replace="common/aside.html"></div>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1></h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item active"></li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">

  <div class="col-md-10">
    <div class="card card-primary">
      <div class="card-header">
        <h3 class="card-title">数据源配置</h3>
      </div>
      <!-- /.card-header -->
      <!-- form start -->
        <form role="form" id="form1"  method="post"  th:action="@{'/dbInfo/save'}" onsubmit="onSubmit()">
            <input type="hidden" name="id" th:value="${dbInfo.id}"/>
            <div class="card-body">
                <div class="form-group">
                    <label for="fromMailName"><font color="red">*</font>数据源别名</label>
                    <input type="text"  th:value="${dbInfo.aliasName}" autocomplete="off" class="validate[required,maxSize[50]] form-control" name="aliasName" id="aliasName" placeholder="输入别名如订单数据库">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1"><font color="red">*</font>数据库类型</label>
                    <select class="validate[required] form-control" onchange="setPort();"  name="dbType" id="dbType">
                        <option value="mysql">mysql</option>
                        <option value="oracle">oracle</option>
                        <option value="postgresql">postgresql</option>
                        <option value="sqlserver">sqlserver</option>
                        <option value="db2">db2</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="fromMailName"><font color="red">*</font>用户名</label>
                    <input type="text"  th:value="${dbInfo.user}" autocomplete="off" class="validate[required,maxSize[40]] form-control" name="user" id="user" placeholder="输入数据库用户名">
                </div>
                <div class="form-group">
                    <label for="fromPwd"><font color="red">*</font>密码</label>
                    <input type="password"  th:value="${dbInfo.passwd}" class="validate[required,maxSize[40]] form-control" name="passwd" id="passwd" placeholder="输入数据库密码">
                </div>
                <div class="form-group">
                    <label for="fromMailName"><font color="red">*</font>数据库IP</label>
                    <input type="text" th:value="${dbInfo.ip}" autocomplete="off" class="validate[required,maxSize[40]] form-control" name="ip" id="ip" placeholder="输入数据库服务器ip">
                </div>
                <div class="form-group">
                    <label for="fromMailName"><font color="red">*</font>数据库端口</label>
                    <input type="text"  th:value="${dbInfo.port}" autocomplete="off" class="validate[required,custom[number],maxSize[10]] form-control" name="port" id="port" placeholder="输入数据库端口">
                </div>
                <div class="form-group">
                    <label for="fromMailName"><font color="red">*</font>数据库名称</label>
                    <input type="text"  th:value="${dbInfo.dbName}" autocomplete="off" class="validate[required,maxSize[50]] form-control" name="dbName" id="dbName" placeholder="输入数据库名称">
                </div>

            </div>
            <!-- /.card-body -->

            <div class="card-footer">
                <button type="button" onclick="test()" class="btn btn-primary">连接测试</button>
                <button type="submit" class="btn btn-primary">保存</button>
            </div>

        </form>
      <!-- /.card-body -->
    </div>
    <!-- /.card -->


  </div>

        </div>
      </div>
    </section>
  </div>


  <div th:replace="common/footer.html"></div>

</div>
<!-- ./wrapper -->
<link rel="stylesheet" th:href="@{'/static/js/jQuery/validationEngine.jquery.css'}" type="text/css"/>
<script th:src="@{'/static/js/jQuery/jquery.validationEngine-zh_CN.js'}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{'/static/js/jQuery/jquery.validationEngine.js'}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{'/static/js/jQuery/jquery.form.min.js'}" type="text/javascript" charset="utf-8"></script>

<script th:inline="javascript">
    $(document).ready(function(){
        $("#form1").validationEngine();
        $("#dbType").val([[${dbInfo.dbType}]]);
    });
    toastr.options.timeOut = 15000;
    function onSubmit() {
        $("#form1").attr("action","/wgcloud/dbInfo/save");
        return true;
    }

    function test(){
        $("#form1").attr("action","/wgcloud/dbInfo/validate");
        $("#form1").ajaxSubmit(function(message) {
            var msg = JSON.parse(message);
            if(msg.code!=""){
                if(msg.msg!='' && msg.code=="0"){
                    toastr.success(msg.msg);
                }
                if(msg.msg!='' &&  msg.code=="1"){
                    toastr.error(msg.msg);
                }
            }
        });
    }

    function setPort(){
        if($("#dbType").val()=='mysql'){
            $("#port").val('3306')
        }
        if($("#dbType").val()=='oracle'){
            $("#port").val('1521')
        }
        if($("#dbType").val()=='postgresql'){
            $("#port").val('5432')
        }
        if($("#dbType").val()=='sqlserver'){
            $("#port").val('1433')
        }
        if($("#dbType").val()=='db2'){
            $("#port").val('5000')
        }
    }





</script>
</body>
</html>
